/* eslint-disable no-useless-catch */
import MapModal from '@/components/MapModal';
import { apiLbs } from '@/services';
import { Dialog, Form, Input, Button } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { ENUMS } from './stores/OrderChangeStore';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import { arrTransferStr, deconstructionMapObj } from '@/utils/util';

const MapModalInput = (props) => {
  const { name, value, record, type, ...cfg } = props;
  const [map, setMap] = useState({ show: false, coord: '', cityName: '' });
  const [fieldValue, setFieldValue] = useState('');
  const { orderChangeStore: store } = useStore();

  useEffect(() => {
    setFieldValue(value);
    setMap({});
  }, [value]);


  const handleOnChange = (e) => {
    const coord = record?.[`${type}Tude`];
    const newRecord = _.cloneDeep(record);
    _.assign(newRecord, {
      [`${type}Tube`]: deconstructionMapObj(coord),
      [`${type}Name`]: e,
    });
    const valueTmp = `${coord}-${e}`;
    cfg.onChange(valueTmp);
    setFieldValue(e);
  };

  const handleMapOpen = async () => {
    try {
      await store.updateBaseRoadPrice(record);
      let coord = record?.[`${type}Tude`];
      const [mainArea, miniorArea] = record?.[`${type}Area`].split('-');
      const mainName = ENUMS.cities[type][mainArea];
      const miniorName = ENUMS.area[type][miniorArea];
      const res = await apiLbs.placeSearch({ region: mainName, keyword: miniorName });
      const { location } = res[0];
      coord = arrTransferStr(location);
      setMap({ show: true, coord, cityName: mainName });
    } catch (error) {
      Dialog.error({
        content: t`${error}`,
      });
    }
  };


  const handleCoordPicked = async (coord) => {
    _.assign(record, {
    });
    const { lng, lat } = coord;
    const r = await apiLbs.lbsGeocoder({ coord: [lng, lat] });
    const { address } = r;

    setFieldValue(address);
    setMap({ show: false });
    const newRecord = _.cloneDeep(record);
    _.assign(newRecord, {
      [`${type}Tube`]: deconstructionMapObj(coord),
      [`${type}Name`]: address,
    });
    const valueTmp = `${coord}-${address}`;
    cfg.onChange(valueTmp);
  };

  return (
    <>
      <Form.Item
        name={name}
        {...cfg.itemProps}
        {...cfg.itemLayout}
      >
        <Input.Group addonAfter={
          <Button
            type="secondary"
            onClick={handleMapOpen}
          >{t`获取地址`}
          </Button>
        }
        >
          <Input
            value={toJS(fieldValue)}
            style={{ width: '100%' }}
            onChange={handleOnChange}
          />
        </Input.Group>
      </Form.Item>
      <MapModal
        visible={map?.show}
        coord={map?.coord}
        containerId={'mapModalInput'}
        onClose={() => setMap({ show: false })}
        onCancel={() => setMap({ show: false })}
        onPick={handleCoordPicked}
      />
    </>
  );
};

export default observer(MapModalInput);
